<template>
  <div>
 <mt-navbar v-model="selected">
  <mt-tab-item id="1" >TOP250</mt-tab-item>
  <mt-tab-item id="2" >本地热映</mt-tab-item>
  <mt-tab-item id="3">即将上映</mt-tab-item>
</mt-navbar>

<!-- tab-container -->
<mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
  <div class="content">
    <mt-loadmore 
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore">
    <mt-cell v-for="(item, index) in toplist" :key="index">
      <router-link :to="'/home/douban/movieinfo/'+item.id" class="moive-item" tag="div">
        <div class="img-box"><img :src="item.images.medium" alt=""></div>
        <div class="moive-info">
          <p>名称：<b>{{item.title}}</b></p>
          <p>上映时间：{{item.year}}</p>
          <p>类型：<span v-for="(genres, index) in item.genres" :key="index">{{item.genres[index]}}</span>
          </p>
          <p>评分：{{item.rating.average}}</p>

        </div>
      </router-link>
    </mt-cell>
    </mt-loadmore>
    </div>
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
  <div class="content">
    <mt-loadmore 
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore">
    <mt-cell v-for="(item, index) in locallist" :key="index">
      <router-link :to="'/home/douban/movieinfo/'+item.id" class="moive-item" tag="div">
        <div class="img-box"><img :src="item.images.medium" alt=""></div>
        <div class="moive-info">
          <p>名称：<b>{{item.title}}</b></p>
          <p>上映时间：{{item.year}}</p>
          <p>类型：<span v-for="(genres, index) in item.genres" :key="index">{{item.genres[index]}}</span>
          </p>
          <p>评分：{{item.rating.average}}</p>

        </div>
      </router-link>
    </mt-cell>
    </mt-loadmore>
    </div>
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
    <div class="content">
    <mt-loadmore 
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore">
    <mt-cell v-for="(item, index) in comsoonlist" :key="index">
      <router-link :to="'/home/douban/movieinfo/'+item.id" class="moive-item" tag="div">
        <div class="img-box"><img :src="item.images.medium" alt=""></div>
        <div class="moive-info">
          <p>名称：<b>{{item.title}}</b></p>
          <p>上映时间：{{item.year}}</p>
          <p>类型：<span v-for="(genres, index) in item.genres" :key="index">{{item.genres[index]}}</span>
          </p>
          <p>评分：{{item.rating.average}}</p>

        </div>
      </router-link>
    </mt-cell>
    </mt-loadmore>
    </div>
  </mt-tab-container-item>
</mt-tab-container>
  <div class="scrollTop" v-show="showTop" @click="toTop">
    <img src="../../images/menu1.png" width="100%"/>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toplist: [],
      topconfig:{
        url:"https://api.douban.com//v2/movie/top250?count=10&start=",
        currentPage:0,
        type:"toplist"
      },
      locallist:[],
      localconfig:{
        url:"https://api.douban.com/v2/movie/in_theaters?city=南昌&count=10&start=",
        currentPage:0,
        type:"locallist"
      },
      comsoonlist:[],
      comsoonconfig:{
         url:"https://api.douban.com/v2/movie/coming_soon?&count=10&start=",
        currentPage:0,
        type:"comsoonlist"
      },
      selected: "1",
      obj:{},
      allLoaded: false,
      scrollTop: 0,
      time: 0,
      dParams: 20,
      scrollState: 0
    };
  },
  mounted() {
      window.addEventListener('scroll', this.getScrollTop);

      this.$emit("changTit",true,'豆瓣电影');
      //console.log(this)
    },
  methods: {
      getList(url,type){
        
        console.log(url)
        this.$http.jsonp(url, {}, { headers: {}, emulateJSON: true })
          .then(response => {
            
         if(this[type].lenght!=0){
           response.data.subjects.forEach(item => {
             this[type].push(item)
           }); 
         }else{
           this[type]=response.data.subjects;
         }
        if(response.data.subjects.lenght<10){
         this.allLoaded = true
        }
          });
      },
      loadBottom() { 
       // this.allLoaded = true;// 若数据已全部获取完毕
        this.$refs.loadmore.onBottomLoaded();
        this.switchTap()
        var currentItem=this.obj.index,newPage;
        if(currentItem==1){
          newPage =  (this.topconfig.currentPage +=10)
        }else if(currentItem==2){
          newPage = (this.localconfig.currentPage +=10)
        }
        var newurl= this.obj.cu+newPage
        this.getList(newurl,this.obj.t)
      },
    switchTap(){
      var c= this.selected;
      if(c==1){
        this.obj.u=this.topconfig.url+this.topconfig.currentPage;
        this.obj.t=this.topconfig.type;this.obj.index=c;this.obj.cu=this.topconfig.url;
      }else if(c==2){
        this.obj.u=this.localconfig.url+this.localconfig.currentPage;
        this.obj.t=this.localconfig.type;this.obj.index=c;this.obj.cu=this.localconfig.url;
      }else{
        this.obj.u=this.comsoonconfig.url+this.comsoonconfig.currentPage;
        this.obj.t=this.comsoonconfig.type;this.obj.index=c;this.obj.cu=this.comsoonconfig.url;
      }
    },
    //返回顶部
     toTop(e) {
        if(!!this.scrollState){
          return;
        }
        this.scrollState = 1;
        e.preventDefault();
        let distance = document.documentElement.scrollTop || document.body.scrollTop;
        let _this = this;
        this.time = setInterval(function(){ _this.gotoTop(_this.scrollTop-_this.dParams) }, 10);
      },
      gotoTop(distance){
        this.dParams += 20;
        distance = distance>0 ? distance : 0;
        document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = distance;
        if(this.scrollTop < 10){
          clearInterval(this.time);
          this.dParams = 20;
          this.scrollState = 0;
        }
      },
      getScrollTop() {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      }
  },
  created() {
    this.getList((this.topconfig.url+0),'toplist');

  },
  watch: {
    selected:function(val,oleval){
      this.switchTap()
      this.getList(this.obj.u,this.obj.t)
    }, 
  },
  computed:{
      showTop: function(){
        let value = this.scrollTop>200?true:false;
        return value;
      },
    },
};
</script>

<style lang="scss" scoped>
 .content{
            overflow: scroll;
        }
.mint-navbar .mint-tab-item.is-selected{margin-bottom: 0};
.moive-item{
  display: flex;
  justify-content: space-between;widows: 100% !important;
  margin-top: 10px; border: 1px solid #eee;box-shadow:0 0 9px #eee;
  .img-box{flex: 1;margin-right: 10px;
  img{width: 100%}
  }
  .moive-info{flex: 2;padding-top:10px;
  p{line-height: 1.75em;display: flex;color: #5d5d5f;
    span{display: inline-block;padding: 2px;background: #eee;margin-right: 4px}
  }

  }
}
 .scrollTop {
    position: fixed;
    right: 20px;
    bottom: 80px;
    width: 30px;height: 30px;
    cursor: pointer;
  }
</style>


